<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <!--1.创建画布并确定尺寸-->
    <!--<canvas width="320" height="240"></canvas>-->
    <canvas class="my-canvas">
      <p>如果用户的浏览器不支持画布功能，这些内容就会显示出来</p>
    </canvas>
  </body>
  <script>
    var canvas = document.querySelector('.my-canvas');
    var width = canvas.width = window.innerWidth;
    var height = canvas.height = window.innerHeight;
    
    // 2.获取画布上下文
    var ctx = canvas.getContext('2d');
    console.log(ctx);//CanvasRenderingContext2D
    
    // 3.1.矩形
    /*ctx.fillStyle = 'rgb(0,212,255)';
    ctx.fillRect(50, 50, 100, 150);
    ctx.fillStyle = 'rgb(253,187,45)';
    ctx.fillRect(75, 75, 100, 100);
    ctx.fillStyle = 'rgba(238,174,202,0.75)';//透明度
    ctx.fillRect(25, 150, 175, 50);*/
    // 3.2.描边
    ctx.lineWidth = 5;//宽度，必须在strokeRect之前，否则无效
    ctx.strokeStyle = 'rgb(253,29,29)';
    ctx.strokeRect(25, 25, 175, 200);
    // ....
  </script>
</html>